<template>
  <div class="lever-deal">
    <!-- 合约交易上面部分 -->
    <div class="deal flex js-sp mb-24 deal_width">
      <!-- k线中间行情 -->
      <div class="deal-center radius-8">
        <!-- 当前交易对数据 -->
        <div class="mb-24">
          <div
            class="p-center mb-16 trad-data radius-8 quotebg flex js-sp align-center"
          >
            <div class="flex js-st align-center">
              <!-- <div
                class="down-menu quotet1 text-bolder text-26 family-d flex align-center"
                style="margin-inline-end:10px"
                @click="state.choiceTrad = true"
                v-clickout="hideMenu"
              >
                <svg-icon
                  class="mt-1"
                  data-_icon-name="ic_down_dark"
                  v-show="!state.choiceTrad"
                ></svg-icon>
                <svg-icon
                  class="mt-1"
                  data-_icon-name="ic_up_dark"
                  @click.stop="state.choiceTrad = false"
                  v-show="state.choiceTrad"
                ></svg-icon> -->
              <span
                class="mg-rt-10 down-menu quotet1 text-bolder text-26 family-d flex align-center"
              >
                {{ gettrading?.stock_name }}/{{ gettrading?.stock_code }}</span
              >

              <!-- 交易对弹窗 -->
              <!-- <div class="trading radius-8 quotebg" v-if="state.choiceTrad">
                  
                </div> -->
              <!-- </div> -->
              <div class="tradata-right" v-loading="state.loading">
                <ul class="flex js-sp header-ul">
                  <li class="family-d">
                    <div
                      class="text-18 mb-2 text-bolder"
                      :class="
                        state.nowData.increase_value > 0
                          ? 'text-red'
                          : 'text-green'
                      "
                    >
                      {{ $currency(state.nowData.now_price) }}
                    </div>
                    <div class="quotet3 text-10">
                      ≈{{ $currency(state.nowData.now_price) }}
                    </div>
                  </li>
                  <li>
                    <div class="quotet3 text-10 mb-4">
                      {{ $t("deal.increase") }}
                    </div>
                    <div
                      class="text-14 family-d text-bolder"
                      :class="
                        state.nowData.increase_value > 0
                          ? 'text-red'
                          : 'text-green'
                      "
                    >
                      {{
                        state.nowData.increase_value
                          ? (state.nowData.increase_value * 100).toFixed(2)
                          : 0
                      }}%
                    </div>
                  </li>
                  <li>
                    <div class="quotet3 text-10 mb-4">
                      {{ $t("deal.highest") }}
                    </div>
                    <div class="color_1e text-14 family-d text-bolder">
                      {{ $currency(state.nowData.high_price) }}
                    </div>
                  </li>
                  <li>
                    <div class="quotet3 text-10 mb-4">
                      {{ $t("deal.lowest") }}
                    </div>
                    <div class="color_1e text-14 family-d text-bolder">
                      {{ $currency(state.nowData.low_price) }}
                    </div>
                  </li>
                  <li>
                    <div class="quotet3 text-10 mb-4">
                      {{ $t("exchange.24HTransactionVolume") }}
                    </div>
                    <div class="color_1e text-14 family-d text-bolder">
                      {{
                        $currency(
                          decimalDigitsInputFilter(
                            state.nowData.transaction_amount,
                            0
                          )
                        )
                      }}{{ gettrading?.currency_name }}
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="flex align-center">
              <div class="text-bolder text-10 text-login status-tag">
                {{
                  state.isRestDate ? $t("stock.Closed") : $t("stock.Opening")
                }}
              </div>
              <div class="ml-24">
                <el-switch
                  v-model="state.themeType"
                  active-color="#333333"
                  inactive-color="#F8F8F8"
                  :class="state.themeType ? 'active_img' : 'inactive_img'"
                  @change="changeTheme"
                ></el-switch>
              </div>
            </div>
          </div>
          <div class="flex js-sp">
            <!-- k线行情 -->
            <div class="kline radius-8">
              <s-tradingview
                v-if="$store.state.exchange.stock_second_data?.id"
                :klineData="state.klineData"
                :is_MACD="false"
                :pageType="3"
                :decimal="Math.pow(10, gettrading?.stock_currency_accuracy)"
                class="tradingviewView"
              />
            </div>
            <!-- 委托订单/实时成交 先用币币交易的看下效果-->
            <div class="order-box radius quotebg">
              <Trading
                @tradingNowData="tradingNowData"
                :type="1"
                ref="stockLeverTrading"
              />
            </div>
          </div>
        </div>

        <!-- 秒合约下面表格 -->
        <div class="data-table quotebg radius-8">
          <div
            class="table-tabbox align-center flex js-sp point text-bold quotet3 text-14 quoteline"
          >
            <div class="flex js-st">
              <div
                class="table-tab"
                @click="changeTable(1)"
                :class="{ 'quote-active text-bolder quotet2': acTable === 1 }"
              >
                {{ $t("lever.contractposition") }}[{{ state.curentNum }}]
              </div>
              <!-- <div
                class="table-tab"
                @click="changeTable(2)"
                :class="{ 'quote-active text-bolder quotet2': acTable === 2 }"
              >
                {{ $t("lever.pendingrecord") }}
              </div> -->
              <div
                class="table-tab"
                @click="changeTable(3)"
                :class="{ 'quote-active text-bolder quotet2': acTable === 3 }"
              >
                {{ $t("lever.transRecord") }}
              </div>
            </div>

            <!-- <el-checkbox
              style="float:right"
              v-model="state.checked"
              v-if="acTable === 3"
              >{{ $t("lever.onlycurrency") }}</el-checkbox
            > -->
          </div>
          <div class="table-block">
            <!-- 合约持仓 -->
            <ContractPositon
              :nowprice="state.nowprice"
              :tradingid="gettrading?.id"
              :priceAccuracy="gettrading?.stock_currency_accuracy"
              @curenttotal="curentTotal"
              ref="conP"
              v-if="acTable === 1"
            />
            <!-- 挂单记录 -->
            <!-- <OrderRecord
              :nowprice="state.nowprice"
              :tradingid="gettrading?.id"
              ref="ordR"
              v-if="acTable === 2"
            /> -->
            <!-- 交易记录 -->
            <Record
              :checked="state.checked"
              :nowprice="state.nowprice"
              :tradingid="gettrading?.id"
              :priceAccuracy="gettrading?.stock_currency_accuracy"
              ref="record"
              v-if="acTable === 3"
            />
          </div>
        </div>
      </div>

      <!-- 秒合约右侧下单 -->
      <div class="handicap quotebg radius-8">
        
        <SecondOrder
          @refreshParent="refreshChildren"
          ref="secondO"
          :nowprice="state.nowprice"
          :limitPrice="state.second_lever_order_limit"
          :isRestDate="state.isRestDate"
        />
      </div>
    </div>
    <!-- 设置止盈止损弹窗 -->
    <el-dialog
      :title="$t('lever.setstop')"
      v-model="state.dialogVisible"
      center
      top="230px"
      width="400px"
    >
      <div class="quotet2 text-12 mb-20">{{ $t("lever.levertip") }}</div>
      <div class="quotet3 text-12 mb-4">
        {{ $t("exchange.takeProfitPrice") }}
      </div>
      <div class="num-input lever-input quoteline radius mb-2">
        <el-input-number
          :controls="false"
          v-model="state.winloseParam.stop_win_price"
          @change="changePriceWin"
        ></el-input-number>
      </div>
      <div class="quotet3 text-10 mb-20">
        {{ $t("lever.expectedprofit") }}：{{ countwin() }}
      </div>
      <div class="quotet3 text-10 mb-4">{{ $t("exchange.stopPrice") }}</div>
      <div class="num-input lever-input quoteline radius mb-2">
        <el-input-number
          :controls="false"
          v-model="state.winloseParam.stop_lose_price"
          @change="changePriceLose"
        ></el-input-number>
      </div>
      <div class="quotet3 text-10 mb-30">
        {{ $t("lever.expectedloss") }}：{{ countlose() }}
      </div>
      <div
        class="set share-color acbtn text-16 text-bold radius text-center"
        v-loading="state.loading"
        @click="set"
      >
        {{ $t("global.setting") }}
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  reactive,
  ref,
  computed,
  onMounted,
  getCurrentInstance,
  onBeforeUnmount,
  watch,
} from "vue";
import Trading from "@/components/transaction/stockSecond/second-trading.vue";
import SecondOrder from "@/components/transaction/stockSecond/second-order.vue";
import ContractPositon from "@/components/transaction/stockSecond/contract-position.vue";
// import OrderRecord from "@/components/transaction/stockSecond/order-record.vue";
import Record from "@/components/transaction/stockSecond/record.vue";
import { useStore } from "vuex";
import { stockOrderLeverSetLeverProfit } from "@/api/stock-trading";
import { demostockOrderLeverSetLeverProfit } from "@/api/demo";
import UseSystemSetting from "@/commonapi/useSystemSetting";
import { ElMessage } from "element-plus";
import sTradingview from "@/components/stock-sTradingview/sTradingview.vue";
import { decimalDigitsInputFilter } from "@/utils/common";
import { formatDate, getTimeZoneDate,getUsTime } from "@/utils/times.js";
import { stockRobotQuotation, stockOpenTime } from "@/api/stock";

export default {
  components: {
    Trading,
    SecondOrder,
    ContractPositon,
    // OrderRecord,
    Record,
    // Websocket,
    sTradingview,
  },
  setup() {
    const stockLeverTrading = ref(null);
    const $store = useStore();
    const state = reactive({
      timer: null,
      choiceTrad: false, //交易对弹窗
      dialogVisible: false, //设置止盈止损
      handCap: {}, //盘口 实时成交数据
      checked: false, //是否只显示当前币
      winloseParam: {}, //止盈止损数据
      loading: false,
      nowData: {}, //当前价数据
      nowprice: 0, //当前价
      tradingList: [],
      orderType: "",
      param: { second_lever_status: true, currency_match_type: 6 },
      klineData: null, //k线数据
      curentNum: 0, //合约持仓数据量
      secondMessage: {},
      themeType: true,
      second_lever_order_limit: 0,
      userAssets: "",
    });
    const activeEx = ref(1);
    const acTable = ref(1);
    const conP = ref(null);
    const ordR = ref(null);
    const record = ref(null);
    const secondO = ref(null);
    const themeStyle = process.env.VUE_APP_COLOR; // dark初始色调
    const {
      appContext: {
        app: {
          config: { globalProperties },
        },
      },
    } = getCurrentInstance();
    const { $websocketTool } = globalProperties;
    /**
     * methods
     */
    // 获取开关状态
    const { virtual_wallet } = UseSystemSetting();
    const gettrading = computed(() => {
      return $store.state.exchange.stock_second_data;
    });
    const tabActive = computed(() => {
      return $store.state.user.secondtradingtab;
    });
    const theme = computed(() => {
      return $store.state.exchange.theme;
    });
    watch(
      () => virtual_wallet.value,
      () => {
        refreshChildren();
      }
    );
    watch(
      () => $store.state.exchange.theme,
      (val) => {
        if (val === "night") {
          document.getElementsByTagName("body")[0].className =
            "theme-style-dark mode-style-" + themeStyle;
        } else {
          document.getElementsByTagName("body")[0].className =
            "mode-style-" + themeStyle;
        }
      }
    );
    watch(gettrading, (newData, oldData) => {
      getStockOpenTime();
      if (oldData) {
        closeMsg({
          socket_type:
            (virtual_wallet.value ? "DEMO_" : "") + "CONTRACT_" + oldData.id,
          subscribed: 0,
        });
        closeMsg({
          socket_type: oldData?.stock_code,
          subscribed: 0,
        });
      }
      if (newData && $websocketTool?.ws?.readyState == 1) {
        getData(newData.id);
        $websocketTool?.ws.send(
          JSON.stringify({
            socket_type:
              (virtual_wallet.value ? "DEMO_" : "") + "CONTRACT_" + newData.id,
            subscribed: 1,
          })
        );
        $websocketTool?.ws.send(
          JSON.stringify({
            socket_type: newData?.stock_code,
            subscribed: 1,
          })
        );
      }
    });
    const visibilityFn = () => {
      // 用户息屏、或者切到后台运行 （离开页面）
      if (document.visibilityState === "hidden") {
        // closeWsMessage();
        console.log("hidden");
      }
      // 用户打开或回到页面
      console.log(document.visibilityState);
      if (document.visibilityState === "visible") {
        if ($websocketTool?.ws && $websocketTool?.ws?.readyState == 1) {
          handleMsg();
        }
      }
    };
    const handleMsg = () => {
      $websocketTool?.ws.send(
        JSON.stringify({
          socket_type:
            (virtual_wallet.value ? "DEMO_" : "") +
            "CONTRACT_" +
            gettrading.value?.id,
          subscribed: 1,
        })
      );
      $websocketTool?.ws.send(
        JSON.stringify({
          socket_type: gettrading.value?.stock_code,
          subscribed: 1,
        })
      );
      $websocketTool?.ws.send(
        JSON.stringify({
          socket_type: "STOCKRANKING",
          subscribed: 1,
        })
      );
      if (state.orderType) {
        $websocketTool?.ws.send(
          JSON.stringify({
            socket_type: state.orderType,
            subscribed: 1,
          })
        );
      }
      if (state.userAssets) {
        $websocketTool?.ws.send(
          JSON.stringify({
            socket_type: state.userAssets,
            subscribed: 1,
          })
        );
      }
      $websocketTool.ws.onmessage = function(res) {
        const message = JSON.parse(res.data);
        if (
          message.type ===
          (virtual_wallet.value ? "DEMO_" : "") +
            "CONTRACT_" +
            gettrading.value?.id
        ) {
          onMessage(message);
        }
        if (message.type === "STOCKRANKING") {
          if (stockLeverTrading.value) {
            stockLeverTrading.value.onMessageTrading(message);
          }
        }
        if (message.type === gettrading.value?.stock_code) {
          klineChange(message);
        }
        if (state.orderType) {
          if (message.type === state.orderType) {
            orderChange(message);
          }
          if (message.type === state.userAssets) {
            assetsChange(message);
          }
        }
      };
    };
    const closeMsg = (msg) => {
      if ($websocketTool?.ws && $websocketTool.ws.readyState == 1) {
        $websocketTool?.ws.send(JSON.stringify(msg));
      }
    };
    onMounted(() => {
      getStockOpenTime();
      if ($store.state.user.userInfo) {
        state.orderType =
          (virtual_wallet.value ? "DEMO_" : "") +
          "USER_STOCK_SECOND_CONTRACT_" +
          $store.state.user.userInfo.id;
        state.userAssets =
          (virtual_wallet.value ? "DEMO_" : "") +
          "USER_ASSETS_" +
          $store.state.user.userInfo.id;
      }

      //初始化样式
      state.themeType = $store.state.exchange.theme === "night" ? true : false;
      if ($store.state.exchange.theme === "night") {
        document.getElementsByTagName("body")[0].className =
          "theme-style-dark mode-style-" + themeStyle;
      } else {
        document.getElementsByTagName("body")[0].className =
          "mode-style-" + themeStyle;
      }

      state.timer = setInterval(() => {
        if ($websocketTool?.ws && $websocketTool?.ws?.readyState == 1) {
          clearInterval(state.timer);
          state.timer = null;
          handleMsg();
        }
      }, 3000);
      document.addEventListener("visibilitychange", visibilityFn);
    });
    const exChange = (i) => {
      activeEx.value = i;
    };
    const assetsChange = (message) => {
      if (message.walletType === 9) {
        secondO.value.getinfo();
      }
    };
    const changeTheme = (val) => {
      state.themeType = val;
      if (val) {
        $store.commit("exchange/SET_THEME", "night");
      } else {
        $store.commit("exchange/SET_THEME", "day");
      }
    };
    // 获取合约持仓数据量
    const curentTotal = (val) => {
      state.curentNum = val;
    };
    // 获取委托订单实时成交数据
    const getData = (val = 0) => {
      let id = 0;
      if (val) {
        id = val;
      } else {
        id = gettrading.value?.id;
      }
      stockRobotQuotation(id).then((res) => {
        state.handCap.contract_buy_list = res.data.contract_buy_list;
        state.handCap.contract_sell_list = res.data.contract_sell_list;
        state.handCap.contract_deal_list = res.data.contract_deal_list;
        state.handCap.time = res.data.time;
      });
    };
    // 切换交易对更换当前数据
    const changeTrading = (val) => {
      state.choiceTrad = false;
      state.nowData = val;
      state.nowprice = state.nowData?.now_price;
    };
    // 隐藏交易对
    const hideMenu = () => {
      state.choiceTrad = false;
    };
    const changeTable = (i) => {
      acTable.value = i;
      refreshChildren();
    };
    const refreshChildren = () => {
      if (acTable.value === 1) {
        conP.value?.refresh();
      }
      if (acTable.value === 2) {
        ordR.value?.refresh();
      }
      if (acTable.value === 3) {
        record.value?.refresh();
      }
    };
    // websocket k线数据
    const klineChange = (val) => {
      if (gettrading.value?.id === val.stock_id) {
        state.nowData = val.increase_data;
        state.nowprice = val.increase_data.now_price;
        state.klineData = val;
      }
    };
    //websocket 通知订单变更
    const orderChange = (val) => {
      console.log(val);
      // $store.commit("exchange/SET_SECOND_ORDER", val.orderStatus);
      refreshChildren();
      secondO.value.refresh();
    };
    // 获取websocket盘口数据
    const onMessage = (val) => {
      state.handCap = val;
    };
    // 止盈止损
    const winloseStop = (item) => {
      state.winloseParam = item;
      state.dialogVisible = true;
    };
    const changePriceWin = (val) => {
      if (val) {
        countwin();
      }
    };
    const changePriceLose = (val) => {
      if (val) {
        countlose();
      }
    };
    const countwin = () => {
      const param = state.winloseParam;
      let num = 0;
      //       预计盈利
      // 1买多  预计盈利 = (止盈价-开仓价)*手数*每手个数
      // 2卖空  预计盈利 = (开仓价-止盈价)*手数*每手个数
      if (param.stop_win_price) {
        if (param.lever_type === 1) {
          num =
            (param.stop_win_price - param.lever_open_price) *
            param.lever_hand *
            param.lever_hand_number;
        } else {
          num =
            (param.lever_open_price - param.stop_win_price) *
            param.lever_hand *
            param.lever_hand_number;
        }
      }
      return num;
    };
    const countlose = () => {
      const param = state.winloseParam;
      let num = 0;
      //       预计亏损
      // 1买多   预计亏损 = (止损价-开仓价)*手数*每手个数
      // 2卖空  预计亏损 = (开仓价-止损价)*手数*每手个数
      if (param.stop_lose_price) {
        if (param.lever_type === 1) {
          num =
            (param.stop_lose_price - param.lever_open_price) *
            param.lever_hand *
            param.lever_hand_number;
        } else {
          num =
            (param.lever_open_price - param.stop_lose_price) *
            param.lever_hand *
            param.lever_hand_number;
        }
      }
      return num;
    };
    // 设置止盈止损
    const set = () => {
      // if (!state.winloseParam.stop_win_price) {
      //   ElMessage.error("请输入止盈价");
      //   return;
      // }
      // if (!state.winloseParam.stop_lose_price) {
      //   ElMessage.error("请输入止损价");
      //   return;
      // }
      const param = {
        id: state.winloseParam.id,
        stop_lose_price: state.winloseParam.stop_lose_price,
        stop_win_price: state.winloseParam.stop_win_price,
      };
      state.loading = true;
      let setFun = virtual_wallet.value
        ? demostockOrderLeverSetLeverProfit
        : stockOrderLeverSetLeverProfit;
      setFun(param)
        .then((res) => {
          state.loading = false;
          if (res.code === 200) {
            ElMessage({
              type: "success",
              message: res.message,
            });
            state.dialogVisible = false;
          }
        })
        .catch(() => {
          state.loading = false;
        });
    };
    // 首次进来的当前数据先用股票
    const tradingNowData = (val) => {
      if (val) {
        state.nowData = val;
        state.nowprice = val.now_price;
      }
    };
    const getStockOpenTime = () => {
      stockOpenTime().then((res) => {
        state.openTime = res.data;
        isRestDate(parseInt(state.openTime?.system_time));
      });
    };
    const isRestDate = (val) => {
      let todayDate = state.openTime?.system_time;
      let hkrestList = state.openTime?.hk_rest_date;
      let usrestList = state.openTime?.us_rest_date;
      let today = getUsTime(
        parseInt(todayDate),
        "YYYY-MM-DD",
        gettrading.value?.stock_type === 2 ? "cn" : "us"
      );
      let am_close_time = parseInt(state.openTime?.am_close_time);
      let am_open_time = parseInt(state.openTime?.am_open_time);
      let pm_close_time = parseInt(state.openTime?.pm_close_time);
      let pm_open_time = parseInt(state.openTime?.pm_open_time);
      let us_close_time = parseInt(state.openTime?.us_close_time);
      let us_open_time = parseInt(state.openTime?.us_open_time);
      let isRest;
      if (gettrading.value?.stock_type === 2) {
        if (hkrestList?.length > 0) {
          isRest = hkrestList.filter((ele) => {
            let item = formatDate(getTimeZoneDate(parseInt(ele)), "yy-MM-dd");
            return item === today;
          });
        } else {
          isRest = [];
        }
      } else {
        if (usrestList?.length > 0) {
          isRest = usrestList.filter((ele) => {
            let item = formatDate(getTimeZoneDate(parseInt(ele)), "yy-MM-dd");
            return item === today;
          });
        } else {
          isRest = [];
        }
      }

      let isOpen =
        gettrading.value?.stock_type === 2
          ? (val < am_close_time && val > am_open_time) ||
            (val < pm_close_time && val > pm_open_time)
          : val < us_close_time && val > us_open_time;
      state.isRestDate = isRest?.length > 0 || !isOpen;
      console.log(
        val < am_close_time && val > am_open_time,
        val < pm_close_time && val > pm_open_time,
        isOpen
      );
    };
    onBeforeUnmount(() => {
      document.removeEventListener("visibilitychange", visibilityFn);
      if (state.timer) {
        clearInterval(state.timer);
        state.timer = null;
      }
      closeMsg({
        socket_type:
          (virtual_wallet.value ? "DEMO_" : "") +
          "CONTRACT_" +
          gettrading.value?.id,
        subscribed: 0,
      });
      closeMsg({
        socket_type: gettrading.value?.stock_code,
        subscribed: 0,
      });
      closeMsg({
        socket_type: state.orderType,
        subscribed: 0,
      });
      closeMsg({
        socket_type: state.userAssets,
        subscribed: 0,
      });
      closeMsg({
        socket_type: "STOCKRANKING",
        subscribed: 0,
      });
      $store.commit("exchange/SET_REDIRECT_URL", "");
    });
    return {
      state,
      exChange,
      changeTable,
      hideMenu,
      activeEx,
      acTable,
      onMessage,
      winloseStop,
      countwin,
      countlose,
      set,
      klineChange,
      gettrading,
      orderChange,
      curentTotal,
      changeTrading,
      decimalDigitsInputFilter,
      getData,
      handleMsg,
      closeMsg,
      conP,
      ordR,
      record,
      refreshChildren,
      secondO,
      theme,
      changeTheme,
      themeStyle,
      tabActive,
      assetsChange,
      tradingNowData,
      getStockOpenTime,
      isRestDate,
      stockLeverTrading,
      changePriceWin,
      changePriceLose,
    };
  },
};
</script>

<style scoped lang="less">
.lever-deal {
  padding: 20px 0;
  box-sizing: border-box;
}
.deal {
  // width: 77.77%;
  margin: 0 auto;
}
.deal-center {
  width: 80.98%;
  min-height: 775px;
  padding-bottom: 10px;
  // box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.down-menu {
  position: relative;
}
// 交易对弹窗
.trading {
  width: 300px;
  height: 540px;
  overflow: hidden;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  position: absolute;
  left: -20px;
  top: 60px;
  z-index: 2010;
  -webkit-animation: slide 0.5s forwards;
  // -webkit-animation-delay: 2s;
  animation: slide 0.5s forwards;
}
@-webkit-keyframes slide {
  0% {
    left: -300px;
    opacity: 0;
  }
  100% {
    left: -20px;
    opacity: 1;
  }
}

@keyframes slide {
  0% {
    left: -300px;
    opacity: 0;
  }
  100% {
    left: -20px;
    opacity: 1;
  }
}
.p-center {
  padding: 0 16px;
  box-sizing: border-box;
}
.order-box {
  width: 23.5%;
  min-height: 530px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  box-sizing: border-box;
}
.trad-data {
  height: 60px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.menu {
  width: 30px;
  height: 30px;
  margin-inline-start: 10px;
}
.tradata-right {
  width: 580px;
  padding-inline-end: 16px;
}
.ml-10 {
  margin-inline-start: 10px;
}
.mb-4 {
  margin-bottom: 4px;
}
.mb-7 {
  margin-bottom: 7px;
}
.mb-2 {
  margin-bottom: 2px;
}
.mb-24 {
  margin-bottom: 24px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-16 {
  margin-bottom: 16px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-11 {
  margin-bottom: 11px;
}
.mb-13 {
  margin-bottom: 13px;
}
.kline {
  width: 76%;
  height: 540px;
  // background: black;
}
.trans-tabbox {
  width: 100%;
  height: 36px;
  border-bottom: 1px solid;
}
.trans-tab {
  margin-inline-end: 30px;
  height: 100%;
  line-height: 36px;
  position: relative;
}
.handicap {
  width: 17.58%;
  height: 970px;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.hand-tab {
  min-height: 23px;
  width: 28px;
  margin-inline-end: 24px;
  position: relative;
  white-space: nowrap;
  text-align: start;
}
.w-50 {
  width: 50px;
}
.w-30 {
  width: 30px;
}
.data-table {
  width: 100%;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}
.table-tabbox {
  padding: 10px 30px 0;
  border-bottom: 1px solid;
}
.table-tab {
  height: 40px;
  line-height: 40px;
  position: relative;
  margin-inline-end: 30px;
}
.table-block {
  padding: 30px;
  box-sizing: border-box;
}
// 设置止盈止损弹窗
.num-input {
  width: 100%;
  height: 42px;
  border: 1px solid;
}
.set {
  width: 100%;
  height: 46px;
  line-height: 46px;
}
.header-ul li {
  // min-width: 120px;
  text-align: start;
}

.mw-120 {
  min-width: 120px;
}
.active_img /deep/ .el-switch__core .el-switch__action {
  background-image: url("../../assets/images/night.png");
  background-repeat: no-repeat;
  background-size: 13px 13px;
  background-position: 1.5px 1px;
}
.inactive_img /deep/ .el-switch__core .el-switch__action {
  background-image: url("../../assets/images/day.png");
  background-repeat: no-repeat;
  background-size: 13px 13px;
  background-position: 1.5px 1px;
}
.lever-deal /deep/ .el-select {
  width: 100%;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: @blue;
  border-color: @blue;
}
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
  color: @blue;
}
.mg-rt-10 {
  margin-inline-end: 10px;
}
.status-tag {
  padding: 5px 15px;
  background: rgba(229, 75, 75, 0.1);
  border: 1px solid #e54b4b;
  box-sizing: border-box;
  border-radius: 50px;
}
.ml-24 {
  margin-inline-start: 24px;
}
</style>
